*{
 margin: 0;
 padding: 0;
 text-decoration: none;
 list-style: none;
 outline: none;
 box-shadow: none;
}
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
	background-color: #000000;
	text-align="center"
}
.div{	 /*div居中*/
margin: 0 auto;	
}
.container{
    width: 400px;
    height: 400px;
	margin: 0 auto;	
    background-color: #000000;
    border-radius:50%; /*圆形背景*/
    overflow:hidden;
    border: 1px solid black;
}
.bbse{ /*body渐变色背景*/
animation:changeb 20s infinite;
-webkit-animation:changeb 20s infinite; /*Safari and Chrome*/
 }
@keyframes changeb{
0%{background-color:#fff;}
10%{background-color:#ff0;}
20%{background-color:#f00;}
30%{background-color:#000;}
40% {background-color:#00f;}
50%{background-color:#0ff;}
60%{background-color:#f0f;}
70%{background-color:#ff0;}
80% {background-color:#f00;}
100%{background-color:#fff;}
}

.jbse{ /*标题文字渐变色*/
font-family: "Arial","Tahoma","微软雅黑";
animation:change 5s infinite;
-webkit-animation:change 5s infinite; /*Safari and Chrome*/
font-weight:80;
 }
@keyframes change{
0%{color:#0fec0f;}
25%{color:#1534ca;}
50%{color:#b6ee19;}
75%{color:#e616d9;}
100% {color:#e81010;}
}
.cabk{ /*canvas圆形背景*/
    border-radius:50%; 
    overflow:hidden;
    border: 1px solid black;
    background-image: url(../img/cle.jpg);
}
#love{
 position: relative;
 height: 220px;
 width: 300px;
 border: 3px solid white;
 border-radius: 10%;
 background-image: url(../img/music.jpg);
 background-size: cover; 
}
.play{
 color: white;
 background-color: #87CEFA;
 margin:0 6px;
}
#love .mlist{
 margin:10px;
 background-color: rgba(1,1,1,0.3);
 height: 145px;
 border-radius: 5px;
 overflow:scroll;
}
#love ul li{
 line-height:30px;
 text-align: center;
 cursor:pointer; 
 border-radius: 4px;
 color: #fff;
}
#love ul li:hover{
 line-height:45px;
 text-align: center;
 cursor:pointer;
 margin:0 5px;
 background-color: #00CCFF;
 border-radius:6px;
}
canvas {
 max-width: 400px;
 width: 100%;
 float: left;
 margin-bottom: 20px;
}
ul.weighted {
 float: left;
 display: block;
 overflow: auto;
 padding: 20px;
 margin: 0 10px 20px 0;
 background-color: #f0f;
 border: 4px solid #aaa;
 border-radius: 20px;
 -moz-border-radius: 20px;
}
ul.weighted li {
 display: inline;
}
ul.weighted li a {
 margin: 2px;
}
.centred p {
 max-width: 320px;
 width: 100%;
 float: left;
 margin-left: 20px;
 }
.preright {
 float: left;
}
.huge {
 font-family: Impact,sans-serif;
 font-size: 56px;
 }
.large {
 font-family: 'Arial Black',sans-serif;
 font-size: 40px;
 }
.medium {
 font-family: Verdana,sans-serif;
 font-size: 18px;
 }
.small {
 font-family: Georgia,sans-serif;
 font-size: 11px;
 }
a.red { color: #f00 }
a.green { color: #0c0 }
a.purple { color: #f09 }
.btn11 {
    width: 74px;
    height: 20px;
    background: url(../img/btn11.png) no-repeat left top;
  
    color: #FFF;
}
.btn45 {
    width: 72px;
    height: 20px;
    background: url(../img/btn45.png) repeat-x left top;
    padding-bottom: 8px;
    padding-left: 4px;
}
input, button {
    font-family: "Arial","Tahoma","微软雅黑";
    border: 0px;
    vertical-align: middle;
    margin: 8px;
    line-height: 18px;
    font-size: 14px;
	border-radius:8%; 
}